*{margin: 0;padding: 0;}
		
		.wrap{
			width: 1000px;
			height: 800px;
			margin: 200px auto;
			background-color: sandybrown;
		}
		.box{
			width: 200px;
			height: 200px;
			margin: 100px auto;
			position: relative;
			transition: all 13s;
			transform-style: preserve-3d;
			animation: move 10s infinite linear alternate;
		}
		.box>div{
			width: 200px;
			height: 200px;
			font-size: 60px;
			opacity: 0.8;
			position: absolute;
			top: 0x;left: 0;
			transition: all 5s;}
		
		.box img{width: 200px;height: 200px;}
		
		.left{transform: rotateY(90deg) translateZ(-100px);}
		.right{transform: rotateY(90deg) translateZ(100px);}
		.top{transform: rotateX(90deg) translateZ(100px);}
		.bottom{transform: rotateX(90deg) translateZ(-100px);}
		.after{transform: translateZ(-100px);}
		.before{transform: translateZ(100px);}
		
		.wrap .box:hover .left{transform: rotateY(90deg) translateZ(-160px);}
		.wrap .box:hover .right{transform: rotateY(90deg) translateZ(160px);}
		.wrap .box:hover .top{transform: rotateX(90deg) translateZ(160px);}
		.wrap .box:hover .bottom{transform: rotateX(90deg) translateZ(-160px);}
		.wrap .box:hover .after{transform: translateZ(-160px);}
		.wrap .box:hover .before{transform: translateZ(160px);}
		h1{
			margin-left: 150px;
			margin-bottom: 50px;
			font-family: "幼圆";
			font-size: 58px;
			font-weight: bold;
		}
		
		@keyframes move{
			from{transform: rotateX(0deg) rotateY(0deg);}
			to{transform: rotateX(13deg) rotateY(720deg);}
		}
		